<template>
  <div class="footer">
    <ul>
      <li>
        <i themeColor class="iconfont icon-tel"></i>
        <p class="title">Call us</p>
        <p class="description">+86 21 5859 1216</p>
      </li>
      <li>
        <i themeColor class="iconfont icon-email"></i>
        <p class="title">Email</p>
        <p class="description">info@beske.com</p>
      </li>
      <li>
        <i themeColor class="iconfont icon-address"></i>
        <p class="title">Location</p>
        <p class="description">Shanghai · China</p>
      </li>
    </ul>
    <ul>
      <li>Copyright & #169 2017 beske.com All Rights Reserved | 沪ICP备14004129号-1 </li>
      <li class="null"></li>
      <li class="iconfont icon-facebook"></li>
      <li class="iconfont icon-twitter"></li>
      <li class="iconfont icon-linkedin"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {

    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.footer {
  background: #F8F8F8;
  box-sizing: border-box;
  padding-top: 1rem;
  ul:first-child {
    width: 12rem;
    margin: 0 auto;
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        font-size: .8rem;
      }
      .title {
        font-size: .4rem;
        margin-top: .44rem;
      }
      .description {
        font-size: .28rem;
        margin-top: .38rem;
      }
    }
  }
  ul:last-child {
    width: 12rem;
    margin: 0 auto;
    height: 1.28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .null {
      flex: 1;
    }
    li {
      color: #ccc;
      font-size: .4rem;
      margin-left: .4rem;
    }
    li:first-child {
      font-size: .24rem;
      margin-left: unset;
    }
  }
}

</style>
